<template>
	<view >
		<view class="store-btn-box flex-center mar-t24">
			<view class="store-btn" @click="onShowService()">
				不指定美容师预约
			</view>
		</view>
		<view class="list-box mar-t40">
			<view class="block-tit">
				可预约美容师
			</view>
			<view 
				class="list-li flex-a mar-t24" 
				v-for="(item, index) in 5"
				:key="index"
			>
				<u--image
					:showLoading="true" 
					:src="getImg('swiper-img')" 
					width="108rpx" 
					height="108rpx"
					radius="16rpx"
				></u--image>
				<view class="li-r pad-l20 flex-a ju-bt">
					<view class="li-tit">
						陈雅馨
					</view>
					<view class="li-btn" @click="onShowService(index + 1)">
						预约
					</view>
				</view>
			</view>
		</view>
		<modalTips 
			:modalShow="modalShow" 
			title="请选择服务方式" 
			:showCancelButton="false"
			:showConfirmButton="false"
		>
			<view class="modal-group pad-b56 pos-rel">
				<view 
					class="group-btn flex-center" 
					v-for="(item, index) in groupList"
					:key="index"
					:class="{'group-btn-on': serviceGroup == item.id, 'mar-t32': index}"
					@click="onSelectGroup(item.id)"
				>
					{{ item.label }}
				</view>
				<view class="modal-close pos-abs" @click="modalShow = false">
					<u-icon name="close-circle" color="#fff" size="64rpx"></u-icon>
				</view>
			</view>
		</modalTips>
	</view>
</template>

<script>
	import modalTips from "@/components/modalTips/modalTips.vue"
	export default {
		components: {modalTips},
		name: "", // 美容师列表
		data() {
			return {
				modalShow: false,
				groupList: [
					{
						label: "到店",
						id: 1,
					},
					{
						label: "到家",
						id: 2,
					},
				],
				serviceGroup: 0, // 选中服务类型
				selectBeauticianId: "", // 选中美容师 id
			}
		},
		methods: {
			onShowService(id) {
				this.selectBeauticianId = id;
				this.modalShow = true;
			},
			onSelectGroup(index) {
				this.serviceGroup = index;
				this.modalShow = false
				this.$emit("onSelectBeautician", this.selectBeauticianId, this.serviceGroup)
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-modal {
		overflow: initial;
	}
	/deep/ .u-popup__content {
		overflow: initial !important;
	}
	.modal-group {
		.modal-close {
			bottom: -100rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 999;
		}
		.group-btn {
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
			line-height: 33rpx;
		}
		.group-btn-on {
			background: #FFF1F5;
			border: 2rpx solid #FF7171;
			color: #FF7171;
		}
	}
	.list-box {
		.li-r {
			width: calc(100% - 108rpx);
			.li-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
			}
			.li-btn {
				width: 152rpx;
				height: 60rpx;
				background: #FF7171;
				border-radius: 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
	.store-btn-box {
		.store-btn {
			width: 560rpx;
			height: 80rpx;
			background: linear-gradient( 135deg, #FF63AE 0%, #FF7171 100%);
			border-radius: 60rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>